<!DOCTYPE html>
<%@taglib prefix="in" uri="/WEB-INF/tld/decorator.tld"%>
<html>
<head>
<title>SiteMan</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<link rel="stylesheet" href="resources/dep/css/bootstrap.min.css" />
<link href="resources/dep/css/kendo.common-bootstrap.min.css"
	rel="stylesheet" />
<link href="resources/dep/css/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="resources/dep/css/kendo.dataviz.min.css" rel="stylesheet" />
<link href="resources/dep/css/kendo.dataviz.bootstrap.min.css"
	rel="stylesheet" />
<link rel="stylesheet" href="resources/dep/css/font-awesome.min.css" />

<link rel="stylesheet" href="resources/app/css/sm.css" />

<script src="resources/dep/js/jquery.min.js"></script>
<script src="resources/dep/js/kendo.all.min.js"></script>
<script src="resources/dep/js/kendo.timezones.min.js"></script>
<script src="resources/dep/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#scheduler").kendoScheduler({
			date : new Date("2013/6/6"),
			showWorkHours : true,
			height : 500,
			views : [ {
				type : "day",
				title : "D"
			}, {
				type : "week",
				title : "W"
			}, {
				type : "month",
				title : "M"
			} ],
			dataSource : [ {
				id : 1,
				start : new Date("2013/6/6 08:00 AM"),
				end : new Date("2013/6/6 09:00 AM"),
				title : "Interview"
			} ]
		});

	});

	function drawRotationChart() {
		var chData = "";
		var chartId = "dashBoardChart";
		var order = [ 0, 1, 2 ], i = 0, rotateTimer, t = 5000;
		$
				.getJSON(
						'resources/app/js/chartData1.json',
						function(result) {
							chData = result.da;

							if (chData && chData.length > 0) {
								updateChart(0);
								rotateTimer = setTimeout(rotateChart, t);
							} else {
								$("#" + chartId)
										.html(
												"<div Style='min-height: inherit;line-height:170px;text-align:center;'>Configure charts on dashboard using <i class='fa fa-cog'></i></div>");

							}
						}).error(function(xhr, ajaxOptions, thrownError) {
					alert(thrownError);
				});

		function rotateChart() {
			i += 1;
			i = (i >= order.length) ? 0 : i;
			updateChart(order[i]);
			rotateTimer = setTimeout(rotateChart, t);
		}
		$("#btnStopTimer").click(function() {
			if (rotateTimer) {
				clearTimeout(rotateTimer);
				rotateTimer = null;
				$(this).find("i").removeClass("fa-pause");
				$(this).find("i").addClass("fa-play");
			} else {
				rotateTimer = setTimeout(rotateChart, 1000);
				$(this).find("i").removeClass("fa-play");
				$(this).find("i").addClass("fa-pause");
			}
		});

		$("#btnPrevChart").click(function() {

			i -= 1;
			i = (i <= -1) ? order.length - 1 : i;
			updateChart(order[i]);
		});
		$("#btnNextChart").click(function() {
			i += 1;
			i = (i >= order.length) ? 0 : i;
			updateChart(order[i]);
		});

		function updateChart(i) {
			var chartConfig = chData[i].configuration;

			chartConfig.dataSource = {
				data : chData[i].chartData
			};

			$("#" + chartId).kendoChart(chartConfig);
			$(".title[for='" + chartId + "']").html(chartConfig.title.text);
		}
	}
	$(document).ready(function() {
		drawRotationChart();
		updateProgress();
		
	});
	
	function updateProgress() {
		$("[data-percent]").each(function() {
			return $(this).css({
				width : "" + ($(this).attr("data-percent")) + "%"
			});
		});
	}
</script>

</head>
<body>
	<header>
		<div class="row navbar-inverse">
			<div class="navbar-header">
				<a class="navbar-brand" href="http://www.insightplm.com"><img
					src="resources/app/images/logo_inv.png" height="40px" /></a>
			</div>
			<ul class="nav navbar-nav">
				<li>
					<h4 class="navbar-text">Site Execution Management</h4>
				</li>
			</ul>
			<div class="navbar-right">
				<ul class="nav navbar-nav navbar-left">
					<li class="cdrop active"><a href="home.htm"><i
							class="fa fa-home"></i> <span>Home</span></a></li>
					<li class="cdrop active"><a href="#"
						onclick='location.reload();'><i class="fa fa-refresh"></i> <span>Refresh</span></a></li>
				</ul>

				<form class="navbar-form navbar-left">
					<div class="form-group">
						<input type="text" placeholder="Search"
							class="search-query animated"> <i class="fa fa-search"></i>
					</div>
				</form>

				<ul class="nav navbar-nav navbar-left">
					<li class="dropdown"><a data-toggle="dropdown"
						class="dropdown-toggle dropdown-avatar" href="#"> <span>
								<img src="loadUsrAvatar.htm" class="menu-avatar"> <span>Navtej
									Bassi<i class="fa fa-caret-down"></i>
							</span> <span class="badge badge-dark-red">7</span>
						</span>
					</a>
						<ul class="dropdown-menu">

							<!-- the first element is the one with the big avatar, add a with-image class to it -->

							<li class="with-image">
								<div class="avatar">
									<img height="60px" src="loadUsrAvatar.htm">
								</div> <span>Navtej Bassi</span>
							</li>

							<li class="divider"></li>

							<li><a href="#"><i class="fa fa-user"></i> <span>Profile</span></a></li>
							<li><a href="#"><i class="fa fa-cog"></i> <span>Settings</span></a></li>
							<li><a href="#"><i class="fa fa-envelope"></i> <span>Messages</span><span
									class="label label-dark-red pull-right">7</span></a></li>
							<li><a href="#"><i class="fa fa-power-off"></i> <span>Logout</span></a></li>
						</ul></li>
				</ul>
			</div>
		</div>
	</header>
	<div class="sidebar-background"></div>
	<div class="sidebar">
		<div id="accordion" class="panel-group">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a href="#search" data-parent="#accordion" data-toggle="collapse">
							Search </a>
					</h4>
				</div>
				<div class="panel-collapse collapse" id="search">
					<div class="panel-body">
						<form role="form" action="" method="post">
							<div class="form-group">
								<label for="type">Type</label> <select url="getList.htm?id=1"
									placeholder="Type" name="type" id="type"
									class="form-control input-sm">

									<option value="1">One</option>
								</select>
							</div>
							<div class="form-group">
								<label for="project">Project</label> <select
									url="getList.htm?id=2" name="project" id="project"
									class="form-control input-sm">

									<option value="1">One</option>
								</select>
							</div>
							<div class="form-group">
								<input name="searchStr" id="searchStr"
									class="form-control input-sm" placeholder="Name / Description">
							</div>
							<button class="btn btn-default pull-right" type="submit">
								<i class="fa fa-search"></i><span>Search</span>
							</button>
						</form>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a href="#bookmarks" data-parent="#accordion"
							data-toggle="collapse"> Bookmarks </a>
					</h4>
				</div>
				<div class="panel-collapse collapse" id="bookmarks">
					<div class="panel-body no-padding">
						<ul class="list-group">
							<li class="list-group-item"><a title="SB-1000, Site Layout"
								href="loadObject?type=24&amp;id=118"><i class="fa fa-ticket"></i><span>SB-00100,
										Site Layout</span></a></li>
							<li class="list-group-item"><a
								title="SB-1000, Right to Way not available in Zone 2"
								href="loadObject?type=24&amp;id=118"><i
									class="fa fa-exclamation"></i><span>QI-01811, Right to
										way...</span></a></li>
							<li class="list-group-item"><a
								href="loadObject?type=24&amp;id=118"><i class="fa fa-ticket"></i><span>SB-00100,
										Site Layout</span></a></li>
							<li class="list-group-item"><a
								href="loadObject?type=24&amp;id=118"><i
									class="fa fa-exclamation"></i><span>QI-01811, Right to
										way...</span></a></li>
							<li class="list-group-item"><a
								href="loadObject?type=24&amp;id=118"><i class="fa fa-ticket"></i><span>SB-00100,
										Site Layout</span></a></li>
							<li class="list-group-item"><a
								href="loadObject?type=24&amp;id=118"><i
									class="fa fa-exclamation"></i><span>QI-01811, Right to
										way...</span></a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a href="#reports" data-parent="#accordion" data-toggle="collapse">
							Reports </a>
					</h4>
				</div>
				<div class="panel-collapse collapse" id="reports">
					<div class="panel-body no-padding">
						<ul class="list-group">
							<li class="list-group-item">Report1</li>
							<li class="list-group-item">Report1</li>
							<li class="list-group-item">Report1</li>
							<li class="list-group-item">Report1</li>
							<li class="list-group-item">Report1</li>
							<li class="list-group-item">More</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a href="#navigator" data-parent="#accordion"
							data-toggle="collapse"> Project Navigator </a>
					</h4>
				</div>
				<div class="panel-collapse collapse" id="navigator">
					<div class="panel-body no-padding">
						<ul class="list-group">
							<li class="list-group-item">Report1</li>
							<li class="list-group-item">Report1</li>
							<li class="list-group-item">Report1</li>
							<li class="list-group-item">Report1</li>
							<li class="list-group-item">Report1</li>
							<li class="list-group-item">More</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="main-area">
		<div class="main-content">
			<div class="row top-row">
				<div class="col-md-2">
					<div class="btn-group">
						<button type="button" class="btn btn-default"
							title="Toggle Sidebar">
							<i class="fa fa-bars fa-lg"></i>
						</button>
						<button type="button" class="btn btn-default"
							title="Advanced Search">
							<i class="fa fa-search-plus fa-lg"></i>
						</button>
					</div>
				</div>
				<div class="col-md-10">
					<div class="pull-right padd-sm select">
						<table>
							<tr>
								<td><h5>Project:</h5></td>
								<td>&nbsp;</td>
								<td><select class="form-control" id="currentProject"
									url="getList.htm?id=2" style="min-width: 200px">
								</select></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<div class="row">
				<div id="main" class="clearfix col-md-12">
					<div class="row">
						<div class="col-md-4">
							<div id="fav-btn">
								<div class="row">
									<div class="col-md-4 fav-btn-normal">
										<a href="#" title="Create New"> <i
											class="fa fa-file-text-o"></i><span>Create New</span>
										</a><span class="triangle-button red"><i class="fa fa-plus"></i></span>
									</div>
									<div class="col-md-4 fav-btn-normal">
										<a href="#" title="Create New"> <i
											class="fa fa-file-text-o"></i><span>Create New</span>
										</a><span class="triangle-button red"><i class="fa fa-plus"></i></span>
									</div>
									<div class="col-md-4 fav-btn-normal">
										<a href="#" title="Create New"> <i
											class="fa fa-file-text-o"></i><span>Create New</span>
										</a><span class="triangle-button red"><i class="fa fa-plus"></i></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-4 fav-btn-normal">
										<a href="#" title="Create New"> <i
											class="fa fa-file-text-o"></i><span>Create New</span>
										</a><span class="triangle-button red"><i class="fa fa-plus"></i></span>
									</div>
									<div class="col-md-4 fav-btn-normal">
										<a href="#" title="Create New"> <i
											class="fa fa-file-text-o"></i><span>Create New</span>
										</a><span class="triangle-button red"><i class="fa fa-plus"></i></span>
									</div>
									<div class="col-md-4 fav-btn-normal">
										<a href="#" title="Create New"> <i
											class="fa fa-file-text-o"></i><span>Create New</span>
										</a><span class="triangle-button red"><i class="fa fa-plus"></i></span>
									</div>
								</div>
								<div class="row">
									<div class="col-md-4 fav-btn-normal">
										<a href="#" title="Create New"> <i
											class="fa fa-file-text-o"></i><span>Create New</span>
										</a><span class="triangle-button red"><i class="fa fa-plus"></i></span>
									</div>
									<div class="col-md-4 fav-btn-normal">
										<a href="#" title="Create New"> <i
											class="fa fa-file-text-o"></i><span>Create New</span>
										</a><span class="triangle-button red"><i class="fa fa-plus"></i></span>
									</div>
									<div class="col-md-4 fav-btn-normal">
										<a href="#" title="Create New"> <i
											class="fa fa-file-text-o"></i><span>Create New</span>
										</a><span class="triangle-button red"><i class="fa fa-plus"></i></span>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-8">
							<div class="box">
								<div class="box-header">
									<div class="title" for="dashBoardChart">Charts</div>
									<ul class="box-toolbar">
										<li class="toolbar-link"><a href="#" id='btnPrevChart'><i
												class="fa fa-arrow-circle-left"></i></a></li>
										<li class="toolbar-link"><a href="#" id='btnStopTimer'><i
												class="fa fa-pause"></i></a></li>
										<li class="toolbar-link"><a href="#" id='btnNextChart'><i
												class="fa fa-arrow-circle-right"></i></a></li>
										<li class="toolbar-link"><a href="#"
											data-toggle="dropdown"><i class="fa fa-cog"></i></a>
											<ul class="dropdown-menu">
												<li><a href="#"><i class="fa fa-plus"></i> Add</a></li>
												<li><a href="#"><i class="fa fa-delete"></i> Remove</a></li>
												<li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
											</ul></li>
									</ul>
								</div>

								<div class="box-content padd-15">
									<div class="row">
										<div class="col-md-4 separate-sections"
											style="margin-top: 5px;">

											<div class="row">
												<div class="col-md-12">
													<div class="dashboard-stats">
														<ul class="list-inline">
															<li class="avatar green"><i
																class="fa fa-arrow-circle-o-up fa-2x"></i></li>
															<li class="count">973,119</li>
														</ul>

														<div class="progress">
															<div class="progress-bar progress-blue tip" title="80%"
																data-percent="80"></div>
														</div>

														<div class="stats-label">Total Visits</div>
													</div>
												</div>
											</div>

											<div class="row" style="margin-top: 30px;">
												<div class="col-md-6">
													<div class="dashboard-stats small">
														<ul class="list-inline">
															<li class="avatar yellow"><i
																class="fa fa-arrows-h fa-2x"></i></li>
															<li class="count">8800</li>
														</ul>
														<div class="progress">
															<div class="progress-bar progress-blue tip" title="65%"
																data-percent="65"></div>
														</div>

														<div class="stats-label">New Visitors</div>
													</div>
												</div>

												<div class="col-md-6">
													<div class="dashboard-stats small">
														<ul class="list-inline">
															<li class="avatar red"><i
																class="fa fa-arrow-circle-o-down fa-2x"></i></li>
															<li class="count">25668</li>
														</ul>
														<div class="progress">
															<div class="progress-bar progress-blue tip" title="80%"
																data-percent="80"></div>
														</div>
														<div class="stats-label">Page Views</div>
													</div>
												</div>
											</div>

										</div>
										<div class="col-md-8">
											<div class="sine-chart" id="dashBoardChart"
												style="max-height: 200px"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-6">
							<div class="box small-Schdluer">
								<div class="box-header">
									<div class="title">Full calendar</div>
									
								</div>

								<div class="box-content">
									<div id="scheduler"></div>
								</div>
							</div>
						</div>
						<div class="col-md-6">
							<div class="box">
								<div class="box-header">
									<span class="title">Bulliten Board</span>
									<ul class="box-toolbar">
										<li><span class="label label-blue"></span></li>
									</ul>
								</div>
								<div class="box-content scrollable"
									style="height: 500px; overflow-y: auto">
									<!-- find me in partials/news_with_icons -->

									<div class="box-section news with-icons">
										<div class="avatar blue">
											<i class="fa fa-rss fa-2x"></i>
										</div>
										<div class="news-time">
											<span>06</span> jan
										</div>
										<div class="news-content">
											<div class="news-title">
												<a href="#">Twitter Bootstrap v3.0 is coming!</a>
											</div>
											<div class="news-text">With 2.2.2 out the door, our
												attention has shifted almost entirely to the next major
												update to the project ...</div>
										</div>
									</div>

									<div class="box-section news with-icons">
										<div class="avatar green">
											<i class="fa fa-comment-o fa-2x"></i>
										</div>
										<div class="news-time">
											<span>11</span> feb
										</div>
										<div class="news-content">
											<div class="news-title">
												<a href="#">Ruby on Rails 4.0</a>
											</div>
											<div class="news-text">Rails 4.0 is still unfinished,
												but it is shaping up to become a great release ...</div>
										</div>
									</div>

									<div class="box-section news with-icons">
										<div class="avatar purple">
											<i class="fa fa-calendar-o fa-2x"></i>
										</div>
										<div class="news-time">
											<span>04</span> mar
										</div>
										<div class="news-content">
											<div class="news-title">
												<a href="#">All about SCSS</a>
											</div>
											<div class="news-text">Sass makes CSS fun again. Sass
												is an extension of CSS3, adding nested rules ...</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>